<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<!DOCTYPE html >
<html>

<head>
    <meta charset="UTF-8">
    <title>找回密码</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <link rel="stylesheet" type="text/css" href="/lib/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/css/base.css">
    <link rel="stylesheet" type="text/css" href="/css/common.css">
    <link rel="stylesheet" type="text/css" href="/lib/jQuery-step/css/jquery.step.css">
    <style type="text/css">
    .find-password {
        width: 800px;
        margin: 0 auto;
        border-image: none;
        padding: 30px;
    }
    .tips{
        padding-top: 30px;
    }
    .tips p{
        text-align: center;
        font-size: 18px;
        padding: 10px;
    }
    .tips .glyphicon{
        font-size: 50px;
        color: #44b5b4;
    }
    </style>
</head>

<body>
    <header class="header">
        <div class="container">
            <div class="logo">
                <div class="pull-left">
                    <img src="/image/login/logo.png" alt="">
                </div>
                <div class="pull-left">
                    <p>找回密码</p>
                </div>
            </div>
            <div class="pull-right">
                <p>已有账号，<a href="">登录</a></p>
            </div>
        </div>
    </header>
    <div class="container">
        <div class="find-password">
            <div class="step-body" id="myStep">
                <div class="step-header">
                    <ul class="clear">
                        <li class="step-active" style="width: 20%;">
                            <p>验证用户名</p>
                        </li>
                        <li class="" style="width: 20%;">
                            <p>验证邮箱地址</p>
                        </li>
                        <li style="width: 20%;">
                            <p>设置新密码</p>
                        </li>
                        <li style="width: 20%;">
                            <p>完成</p>
                        </li>
                    </ul>
                </div>
                <div class="step-content">
                    <div class="step-list" style="display: block;">
                        <form id="user_form" role="form" class="form-horizontal">
                            <div class="form-group">
                                <label for="firstname">用户名：</label>
                                <div class="col-sm-12">
                                    <input class="form-control" id="firstname" name="firstname" />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <button type="button" class="btn btn-primary" id="submit_1">提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="step-list" style="display: none;">
                        <form id="email_form" role="form" class="form-horizontal">
                            <div class="form-group">
                                <label for="firstname">邮箱地址：</label>
                                <div class="col-sm-12">
                                    <input class="form-control" id="email" name="email" />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <button type="button" class="btn btn-primary" id="submit_2">提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="step-list" style="display: none;">
                        <form id="pwd_form" role="form" class="form-horizontal">
                            <div class="form-group">
                                <label for="firstname">新密码：</label>
                                <div class="col-sm-12">
                                    <input class="form-control" id="password" name="password" type="password"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="img-code">
                                    <label for="code">验证码：</label>
                                    <div class="col-sm-12 ">
                                        <input class="form-control" id="code" name="code" type="text" />
                                    </div>
                                    <img id="img_code" src="/image/img-code.jpg" alt="" width="120">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <button type="button" class="btn btn-primary" id="submit_3">提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="step-list" style="display: none;">
                        <div class="tips">
                            <div style="text-align:center;">
                                <span class="glyphicon glyphicon-ok-sign"></span>
                            </div>
                            <p>密码修改成功！<span id="time" style="color:#d62222">5</span>秒后自动跳转，若未正常跳转，<a href="">点击直接登录</a>。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="/lib/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="/lib/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/lib/jquery.validate/jquery.validate.min.js"></script>
    <script type="text/javascript" src="/lib/jquery-form/jquery.form.js"></script>
    <script type="text/javascript" src="/lib/jQuery-step/jquery.step.js"></script>
    <script type="text/javascript" src="/lib/layer/layer.js"></script>
    <script type="text/javascript" src="/js/form-validator.js"></script>
    <script type="text/javascript" src="/js/find-password.js"></script>
</body>

</html>
